import React, { useState, useEffect, memo } from 'react'
import { withRouter, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'

import 'assets/fonts/iconfont.css'
import './index.css'

function MainTabBar(props) {
  const location = useLocation()

  const [selectedTab, setSelectTab] = useState('')
  const { tabs } = props

  useEffect(() => {
    setSelectTab(location.pathname)
  }, [location.pathname])

  return (
    <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
      <TabBar
        tintColor="#21b97a"
        barTintColor="white"
        noRenderContent
      >
        {
          tabs.map((item, index) => {
            return (
              <TabBar.Item
                title={item.title}
                key={item.key}
                icon={<i className={`iconfont ${item.icon}`} />}
                selectedIcon={<i className={`iconfont ${item.icon}`} />}
                selected={selectedTab === item.path}
                onPress={() => {
                  setSelectTab(item.path)
                  props.history.push(item.path)
                }}
              />
            )
          })
        }
      </TabBar>
    </div>
  )
}

export default memo(withRouter(MainTabBar))
